<@override name="head">
<title>总体报表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${ctx}/assets/css/daterangepicker.css"/>
<link rel="stylesheet" href="${ctx}/assets/css/rpt.css"/>
<script type="text/javascript" src="${ctx}/assets/js/lib/moment.min.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/lib/jquery.daterangepicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/lib/date.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/common/shortcutkey_datePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/rpt.js"></script>
</@override>
<@override name="body">
<div id=content_bg>

    <#include "/main/home/common.ftl"/>

    <input type="hidden" id="sortColumn" />
    <input type="hidden" id="sortType" />
    
    <div id="pagecontent">
        <div id="content">
            <div id="navDiv">
                <ul id="navDiv_ul">
                    <li><i class="icon-home"></i></li>
                    <li><a href="${ctx}/advertiser/main/dashboard">首页</a></li>
                    <li><i class="icon-angle-right"></i></li>
                    <li class="navDiv_currentLi"><a href="${ctx}/rpt/order/init">订单报表</a></li>
                    <li><i class="icon-angle-right"></i></li>
                    <li class="navDiv_currentLi"><a href="${ctx}/rpt/order/detail/init?id=${entity.orderId}">订单明细</a></li>
                    <li><i class="icon-angle-right"></i></li>
                    <li class="navDiv_currentLi"><a href="${ctx}/rpt/adgroup/detail/init?id=${entity.id}">策略明细</a></li>
                </ul>  
             </div>
             <div class="orderGK">
                 <h3 class="orderTitle">策略概况</h3>
                 <div class="orderDescr">
                     <table cellspacing="0" cellpadding="0" class="gkTable">
                         <tbody>
                             <tr>
                                 <td>策略名称</td>
                                 <td>策略ID</td>
                                 <td>策略档期</td>
                                 <td>策略总预算</td>
                                 <td>策略日预算</td>
                             </tr>
                             <tr>
                                 <td><a class="blueColor" href="${ctx}/rpt/adgroup/detail/init?id=${entity.id}">${entity.adGroupName}</a></td>
                                 <td>${entity.id}</td>
                                 <td>${entity.startDate?string('yyyy-MM-dd')}~${entity.endDate?string('yyyy-MM-dd')}</td>
                                 <td>${entity.totalBudget?string(',##0.00')}</td>
                                 <td>${entity.dailyBudget?string(',##0.00')}</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
            <div class="orderGK">
                <h3 class="orderTitle">策略多维度数据</h3>
                <div class="orderGK">
                    <ul class="myTabDrop">
                        <li class="active">策略总表</li>
                        <li>多维度表</li>
                    </ul>
                    <div class="tab-content">
                        <div class="a-choose">
                             <div id="content_choose">
                                <span id="dateChoose_span">
                                    <a href="javascript:$('#dateRangePicker').val('');$.search();">全部</a>| 
                                    <#list selector_date as item>
                                        <a href="javascript:$('#dateRangePicker').val('${item.key} to ${item.value}');$.search();">${item.title}</a>| 
                                    </#list>
                                </span>
                                <span id="calendar_span">
                                    <i class="icon-calendar"></i>
                                    <input type="text" name="dateRangePicker" id="dateRangePicker" value="${dateRangePicker!}" readonly/>
                                </span>
                            </div>
                            <div class="a-btn-search"><input id="btn_formSubmit" type="button" value="查询" onclick="$.search()"></div>
                        </div>
                        <h3 class="pannelTitle mt14">策略概览</h3>
                        <div class="scrollTable">
                            <table border="1" class="tableFig tableReport">
                                <thead>
                                    <tr class="theadTr">
                                        <th class="theadTh" style="width:5%">&nbsp;</th>
                                        <th class="theadTh hidden-impression" style="width:5%">曝光数</th>
                                        <th class="theadTh hidden-click" style="width:5%">点击数</th>
                                        <th class="theadTh hidden-click" style="width:5%">点击率（%）</th>
                                        <th class="theadTh hidden-consume" style="width:5%">eCPM（元）</th>
                                        <th class="theadTh hidden-consume" style="width:5%">花费（元）</th>
                                    </tr>
                                    <tr class="theadTr">
                                        <td class="theadTd">总计</td>
                                        <td class="theadTd hidden-impression" id="gl_td_show"></td>
                                        <td class="theadTd hidden-click" id="gl_td_click"></td>
                                        <td class="theadTd hidden-click" id="gl_td_click_rate"></td>
                                        <td class="theadTd hidden-consume" id="gl_td_ecpm"></td>
                                        <td class="theadTd hidden-consume" id="gl_td_revenue"></td>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="tabPannel" style="display:block">
                            <h3 class="pannelTitle mt20">策略明细</h3>
                            <div class="scrollTable">
                                <div class="posRela">
                                    <table border="1" class="tableFig tableReport" id="dailyTable">
                                        <thead>
                                            <tr class="theadTr">
                                                <th style="width:5%" colspan="2"><span id="titleSpan"></span</th>
                                                <th class="theadTh hidden-impression" style="width:5%">
                                                     <a href="###" name="titleSort" sortColumn="1" sortType="1">曝光<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-click" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="2" sortType="1">点击数<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-click" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="3" sortType="1">点击率（%）<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-consume" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="4" sortType="1">eCPM（元）<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-consume" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="5" sortType="1">花费（元）<i></i></a>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody> 
                                    </table>
                                    <div id="dailyPageDiv" class="pages"></div>
                                </div>
                            </div>
                        </div>
                        <div class="tabPannel">
                        <div class="a-multiple">
                            <a href="javascript:$.loadDataForLocation();" name="0" class="active">地域</a><span>|</span>
                            <a href="javascript:$.loadDataForHour();" name="1">小时</a><span>|</span>
                            <a href="javascript:$.loadDataForBanner();" name="2">创意</a><span>|</span>
                            
                            <#if account_type == 1>
                                <a href="javascript:$.loadDataForMedia();" name="3">媒体</a><span>|</span>
                            </#if>
                        </div>
                        <div class="multiple-panel" style="display:block;">
                            <div class="posRela">
                                <table border="1" class="tableFig tableReport" id="table">
                                    <thead>
                                        <tr class="theadTr">
                                            <tr class="theadTr">
                                                <th style="width:5%" rowspan="2" colspan="2"><span id="titleSpan"></span</th>
                                                <th class="theadTh hidden-impression" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="1" sortType="1">曝光<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-click" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="2" sortType="1">点击数<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-click" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="3" sortType="1">点击率（%）<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-consume" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="4" sortType="1">eCPM（元）<i></i></a>
                                                </th>
                                                <th class="theadTh hidden-consume" style="width:5%">
                                                    <a href="###" name="titleSort" sortColumn="5" sortType="1">花费（元）<i></i></a>
                                                </th>
                                            </tr>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody> 
                                </table>
                                <div id="pageDiv" class="pages"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="orderGK">
                <div id="exportReport">
                    <a class="btn_export" href="###" onclick="$.excel();">导出策略报表</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</@override>
<@extends name="/common/simple.ftl"/>

<script>
$(function() {
    var SUCCESS = '000000';
    
    $('#dailyTable a[name=titleSort]').sortAndSearch('$.loadDataForDaily()');
	$('#table a[name=titleSort]').sortAndSearch('', function() {
    	
    	var tab1 = $('.a-multiple a.active').attr('name');
        if(tab1 == 0) {
            $.loadDataForLocation();
        } else if(tab1 == 1) {
        	$.loadDataForHour();
        } else if(tab1 == 2) {
        	$.loadDataForBanner();
        } else if(tab1 == 3) {
        	$.loadDataForMedia();
        }
    });
    
    $('#dateRangePicker').dateRangePicker();
    $(".apply-btn").click(function (event, obj) {
        if (!$(this).hasClass("disabled")) {
            $('#dateRangePicker').val($(".start-day").text() + " to " + $(".end-day").text());
        }
    });
    
    $.loadDataForAll = function () {
        var _start = '';
        var _end = '';
        var _time = $('#dateRangePicker').val();
        if(_time != '') {
            var arr = _time.split(' to ');
            _start = arr[0];
            _end = arr[1];
        }
        
        $.get('${ctx}/rpt/adgroup/all',
            {
                id : '${entity.id}',
                startTime : _start,
                endTime : _end
            },
            function(data) {
                if(data.code != SUCCESS) {
                    alert(data.msg);
                    return;
                }
                $('#gl_td_show').text($.format(data.result.show));
                $('#gl_td_click').text($.format(data.result.click));
                $('#gl_td_click_rate').text($.format(parseFloat(data.result.click_rate * 100.0).toFixed(2)));
                $('#gl_td_ecpm').text($.format(parseFloat(data.result.ecpm).toFixed(2)));
                $('#gl_td_revenue').text($.format(parseFloat(data.result.revenue).toFixed(2)));
        });
    };
    
    $.loadDataForDaily = function(no) {
        $.loadData({
            http : {
                'url' : '${ctx}/rpt/adgroup/daily?id=${entity.id}&sortColumn=' + $('#sortColumn').val() + '&sortType=' + $('#sortType').val()
            },
            table : {
                id : 'dailyTable',
                title : '日期'
            },
            page : {
                'div_id' : 'dailyPageDiv',
                'no' : no,
                'click_method' : '$.loadDataForDaily'
            },
            column_title : function(data) {return [ '', data.date ];}
        });
    };
    
    $.loadDataForBanner = function(no) {
        $.loadData({
            http : {
                'url' : '${ctx}/rpt/adgroup/banner?id=${entity.id}&sortColumn=' + $('#sortColumn').val() + '&sortType=' + $('#sortType').val()
            },
            table : {
                title : '创意'
            },
            page : {
                'no' : no,
                'click_method' : '$.loadDataForBanner'
            },
            column_title : function(data) {return [ data.date, data.name ];}
        });
    };
    
    <#if account_type == 1>
    $.loadDataForMedia = function(no) {
        $.loadData({
            http : {
                'url' : '${ctx}/rpt/adgroup/media?id=${entity.id}&sortColumn=' + $('#sortColumn').val() + '&sortType=' + $('#sortType').val()
            },
            table : {
                title : '媒体'
            },
            page : {
                'no' : no,
                'click_method' : '$.loadDataForMedia'
            },
            column_title : function(data) {return [ data.date,  data.source + " - " +data.adid + " - " + data.name ];}
        });
    };
    </#if>
    
    <#if account_type == 1>
    $.loadDataForHour = function(no) {
        $.loadData({
            http : {
                'url' : '${ctx}/rpt/adgroup/hour?id=${entity.id}&sortColumn=' + $('#sortColumn').val() + '&sortType=' + $('#sortType').val()
            },
            table : {
                title : '小时'
            },
            page : {
                'no' : no,
                'click_method' : '$.loadDataForHour'
            },
            column_title : function(data) {return [ data.date, data.hour ];}
        });
    };
    </#if>
    
    <#if account_type == 1>
    $.loadDataForLocation = function(no) {
        $.loadData({
            http : {
                'url' : '${ctx}/rpt/adgroup/location?id=${entity.id}&sortColumn=' + $('#sortColumn').val() + '&sortType=' + $('#sortType').val()
            },
            table : {
                title : '地域'
            },
            page : {
                'no' : no,
                'click_method' : '$.loadDataForLocation'
            },
            column_title : function(data) {return [ data.date, data.province + '.' + data.city ];}
        });
    };
    </#if>
    
    $.loadDataForAll();
    $.loadDataForDaily();
    $.loadDataForLocation();
    
    $.search = function() {
        
        var tab0 = $('.myTabDrop li.active').index();
        
        // 总表
        if(tab0 == 0) {
            
            $.loadDataForAll();
            $.loadDataForDaily();
            
            // 多维度表
        } else {
            var tab1 = $('.a-multiple a.active').attr('name');
            
            if(tab1 == 0) {
                $.loadDataForLocation();
            } else if(tab1 == 1) {
            	$.loadDataForHour();
            } else if(tab1 == 2) {
            	$.loadDataForBanner();
            } else if(tab1 == 3) {
            	$.loadDataForMedia();
            }
        }
    };
    
    $.excel = function() {
        var _start = '';
        var _end = '';
        var _time = $('#dateRangePicker').val();
        if(_time != '') {
            var arr = _time.split(' to ');
            _start = arr[0];
            _end = arr[1];
        }
        window.location.href = '${ctx}/rpt/adgroup/excel?id=${entity.id}&startTime=' + _start + '&endTime=' + _end;
    }
});
</script>